<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>
    <link rel="stylesheet" type="text/css" href="/project/css/query.css"/>
    <script type="text/javascript" src="/project/js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var params = new URLSearchParams(window.location.search);
            var pageNo = params.get("pageNo");
            var likeValue = params.get("likeValue");
            selectByPage(pageNo, likeValue); // 页面加载完成调分页查询

            $("#queryByLikeValue").click(function () {
                var str = $("#likeValueStr").val().trim();
                if (str === "") {
                    alert("请输入查询条件！");
                    return;
                }
                showLoading();
                selectByPage(1, str); // 当点击查询按钮时调用分页查询
            });
        });

        // 分页查询
        function selectByPage(pageNo, likeValue) {
            showLoading();
            $("#categoryList").empty();
            var url = "/dishes20250327/selectByPage.category";
            var params = {
                "pageNo": pageNo,
                "likeValue": likeValue
            };
            $.post(url, params, function (data) {
                try {
                    var JsonObj = JSON.parse(data);
                    var recordList = JsonObj.recordList;
                    for (var i = 0; i < recordList.length; i++) {
                        var category = recordList[i];
                        $("<tr><td>" + category.dishesId + "</td>" +
                            "<td>" + category.dishesName + "</td>" +
                            "<td>" + category.price + "</td>" +
                            "<td>" + category.createtime + "</td>" +
                            "<td>" + category.description + "</td>" +
                            "<td><a href='/project/toEdit.category?dishesId=" + category.dishesId + "'>编辑</a></td>" +
                            "<td><a href='/project/deleteById.category?dishesId=" + category.dishesId + "' onclick='del(this)'>删除</a></td></tr>")
                            .appendTo($("#categoryList"));
                    }
                    // 回填查询条件
                    $("#likeValueStr").val(JsonObj.likeValue);
                    // 显示分页相关的信息
                    $("#recordCount").text(JsonObj.recordCount);
                    $("#totalPages").text(JsonObj.totalPages);
                    $("#pageNo").text(JsonObj.pageNo);
                    // 分页的四个超链接
                    $("#homePage").prop("href", "/project/toList.category?pageNo=1&likeValue=" + JsonObj.likeValue);
                    if (JsonObj.pageNo > 1)
                        $("#priPage").prop("href", "/project/toList.category?pageNo=" + (JsonObj.pageNo - 1) + "&likeValue=" + JsonObj.likeValue);
                    if (JsonObj.pageNo < JsonObj.totalPages)
                        $("#nextPage").prop("href", "/project/toList.category?pageNo=" + (JsonObj.pageNo + 1) + "&likeValue=" + JsonObj.likeValue);
                    $("#tailPage").prop("href", "/project/toList.category?pageNo=" + JsonObj.totalPages + "&likeValue=" + JsonObj.likeValue);
                } catch (error) {
                    alert("数据解析出错，请稍后重试！");
                }
                hideLoading();
            }).fail(function () {
                alert("请求失败，请检查网络连接！");
                hideLoading();
            });
        }

        function del(aNode) {
            var str = $(aNode).parent().parent().find("td").eq(1).text();
            if (!confirm("确定要删除" + str + "的信息吗？")) {
                event.preventDefault();
            }
        }

        function showLoading() {
            $("#loading").show();
        }

        function hideLoading() {
            $("#loading").hide();
        }
    </script>
</head>
<body>
<div id="top">·当前位置： 菜品管理 -- 查看菜品信息</div>
<div id="contexttop">
    <table id="tab" border="1">
        <tr>
            <td colspan="7" height="50px">
                <input type="text" id="likeValueStr" title="菜品ID、菜品名称、描述" placeholder="菜品ID、菜品名称、描述"/>
                <input type="button" value="查询" id="queryByLikeValue"/>
            </td>
        </tr>
        <tr bgcolor="#E0FBC4">
            <th>菜品ID</th>
            <th>菜品名称</th>
            <th>价格</th>
            <th>描述</th>
            <th colspan=2>操作</th>
        </tr>
        <tbody id="categoryList"></tbody>
    </table>
</div>
<div id="loading" style="display: none; text-align: center;">加载中，请稍候...</div>
<div align="center" id="contextbotton">
    &nbsp;总记录数&nbsp;<span id="recordCount"></span>&nbsp;条
    &nbsp;共&nbsp;<span id="totalPages"></span>&nbsp;页
    &nbsp;<a href="#" id="homePage">首页</a>
    &nbsp;<a href="#" id="priPage">上一页</a>
    &nbsp;<a href="#" id="nextPage">下一页</a>
    &nbsp;<a href="#" id="tailPage">尾页</a>
    &nbsp;第&nbsp;<span id="pageNo"></span>&nbsp;页&nbsp;
</div>
</body>
</html>